<template>
	<view class="container">
		<view class="title">你的性别是?</view>
		<view class="payatton">选择完毕后是无法修改的哦</view>
		<view class="sex-box">
			<view class="sex-box-item" v-for="(item,index) in imgArr" :key="index" @click="selectSex(index)">
				<image :src="selectedIndex === index ? item.aciveImg : item.img" alt="widthFix" />
				<view class="sex-siz">{{item.title}}</view>
			</view>
		</view>
		<view class="btns" @click="submit">
			下一步
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectedIndex: null, // 当前选中的索引
				imgArr: [{
						title: '男生',
						img: '/static/image/login/man.png',
						aciveImg: '/static/image/login/man-active.png'
					},
					{
						title: '女生',
						img: '/static/image/login/woman.png',
						aciveImg: '/static/image/login/woman-active.png'
					},
				]
			}
		},
		methods: {
			selectSex(index) {
				this.selectedIndex = index;
			},
			// 下一步
			submit(){
				if (this.selectedIndex == null) return this.$helper.toast('none', '请选择性别!')
				// gender 性别1男2女
				let gender = this.selectedIndex == 0 ? 1 : 2;
				console.log(gender,'gender')
				this.$helper.to('/pages/views/interest/interest?gender='+ gender)
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.container {
		padding: 25rpx;
		font-family: Source Han Sans CN, Source Han Sans CN;

		.title {
			font-weight: 500;
			font-size: 48rpx;
			color: #000000;
			line-height: 67rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		.payatton {
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			line-height: 39rpx;
			text-align: left;
			margin-top: 20rpx;
		}

		.sex-box {
			display: flex;
			justify-content: space-around;
			margin-top: 60rpx;

			.sex-box-item {
				width: 260rpx;

				image {
					width: 260rpx;
					height: 320rpx;
				}

				.sex-siz {
					margin-top: 20rpx;
					font-weight: 400;
					font-size: 32rpx;
					color: #333333;
					line-height: 45rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;
				}
			}
		}
	}
	.btns {
		width: 630rpx;
		height: 90rpx;
		background: rgba(51, 51, 51, 0.8);
		border-radius: 49rpx;
		text-align: center;
		line-height: 90rpx;
		font-weight: 400;
		font-size: 32rpx;
		color: #FEC92F;
		position: fixed;
		bottom: 100rpx;
		left: 50%;
		transform: translate(-50%);
	}
</style>